<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>



<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/modules/tab.php" -->
<div class="ui top attached tabular menu">
	<a class="item" data-tab="first">第一</a>
	<a class="item" data-tab="second">第二</a>
	<a class="item active" data-tab="third">第三</a>
</div>


<div class="ui bottom attached tab segment" data-tab="first" style="height: 90vh">
	第一

</div>


<div class="ui bottom attached tab segment" data-tab="second" style="height: 90vh">
	第二

</div>


<div class="ui bottom attached tab segment active" data-tab="third" style="height: 90vh">
	第三

</div>

<script type="text/javascript">
	//tab选项初始化
	$('.menu .item').tab();
	//获取tab的item选项
	var item=$('.tabular .item');
	item.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		$(this).addClass('active')
		$(this).siblings().removeClass('active');
	})	
</script>
